<script setup lang="ts">
import { onMounted, getCurrentInstance, ref, computed } from 'vue';
import { useStore } from 'vuex';
import { TonConnectUI } from '@tonconnect/ui'
import Api from './api/test'
import WebApp from '@twa-dev/sdk'
// import {TonConnectUI} from '@tonconnect/ui'


const store = useStore();
const str = ref('asxcascjbzcjbxckjas')
const instance = getCurrentInstance();
const walletAdress = computed(() => store.state.chain.accounts);
let tonConnectUI: TonConnectUI

const init = () => {
  console.log('==============', tonConnectUI);
  const element = document.getElementById('tc-widget-root');
  if (!element) {
    console.log('创建了 TonConnectUI');

    tonConnectUI = new TonConnectUI({
      manifestUrl: 'https://ton-connect.github.io/demo-dapp-with-wallet/tonconnect-manifest.json',
      // buttonRootId: '<YOUR_CONNECT_BUTTON_ANCHOR_ID>'
    });
  }

  console.log(tonConnectUI);

  tonConnectUI.onStatusChange(
    walletAndwalletInfo => {
      // 更新状态/反应变量以在 UI 中显示更新
      console.log('更新了', walletAndwalletInfo);
      console.log(store.state.chain.accounts);

      store.dispatch('chain/AccountsVal', tonConnectUI.account?.address);
    }
  );
}
const connect = async () => {
  try {
    console.log(tonConnectUI.connected);

    if (!tonConnectUI.connected) {
      const { modal } = tonConnectUI;
      await modal.open();
      // const currentState = tonConnectUI.modal.state;
      // console.log('currentState',currentState);
      // const currentWallet = tonConnectUI.wallet;
      // const currentWalletInfo = (tonConnectUI as any).walletInfo;
      // const currentAccount = tonConnectUI.account;
      // console.log(currentWallet,currentWalletInfo,currentAccount);
    }

        
  } catch (e) {
    console.log(e);
  }
}
const disconnect = async () => {
  await tonConnectUI.disconnect();
}
onMounted(() => {
  console.log(store.state);
  Api.findhhh({ sss: 1 })
  if (instance && instance.proxy) {
    const proxy = instance.proxy; // 这里对 proxy 进行类型安全的访问
    console.log(proxy.$utils.formatName(str.value));
  }

  // init()
  // WebApp.ready()
  // WebApp.MainButton.setText("Click me")
  //                 .show()
  //                 .onClick(() => {
  //                   console.log("Main button clicked!");
  //                 });
  // console.log(WebApp);

})



</script>

<template>
  <div>
    <router-view></router-view>
    <!-- <el-button @click="connect">链接</el-button>
    <el-button @click="disconnect">断开链接</el-button>
    <div style="font-size: 0.18rem;">
            钱包地址：{{ walletAdress }}
         </div> -->
  </div>
</template>

<style scoped></style>
